/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useRef, useState } from 'react';
import { Modal } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getRecordList } from '@/services/MiniAppManagement';
import type { ProColumns, ActionType } from '@ant-design/pro-table';

interface OpenModalProps {
  onCancel: () => void;
  visible: boolean;
  record: WkdVipMange.ListItem;
}

const channelMap: Record<any, string> = {
  aliapp: '支付宝',
  mina: '微信',
};

const recordColumns: ProColumns<WkdVipMange.RecordListItem>[] = [
  {
    key: 'user_id',
    title: '用户id',
    dataIndex: 'user_id',
    search: false,
    width: '200px',
  },
  {
    key: 'username',
    title: '用户手机号',
    dataIndex: 'username',
    width: '300px',
    search: false,
  },
  {
    key: 'card_id',
    title: '开通类型',
    dataIndex: 'card_id',
    search: false,
    width: '280px',
    render: (card_id) => {
      return card_id == 2 ? '季卡' : card_id == 1 ? '月卡' : '年卡';
    },
  },
  {
    key: 'channel',
    title: '平台',
    dataIndex: 'channel',
    search: false,
    width: '250px',
    render: (_, { channel: platform }) => channelMap[platform],
  },
  {
    key: 'create_time',
    title: '开通时间',
    search: false,
    dataIndex: 'create_time',
    width: '300px',
  },
  {
    key: 'operate_time',
    title: '操作时间',
    dataIndex: 'operate_time',
    search: false,
    width: '250px',
  },
  {
    key: 'remarks',
    title: '备注',
    dataIndex: 'remarks',
    search: false,
    width: '450px',
  },
  {
    key: 'adm_name',
    title: '操作账号',
    dataIndex: 'adm_name',
    search: false,
    width: '250px',
  },
];

const OpenModal: React.FC<OpenModalProps> = ({ record = {}, visible, onCancel }) => {
  const actionRef = useRef<ActionType>();
  const [list, setList] = useState<WkdVipMange.RecordListItem[]>(
    [] as unknown as WkdVipMange.RecordListItem[],
  );

  const cancel = () => {
    onCancel();
  };

  const handleRequest = async () => {
    const reqParams: WkdVipMange.RecordSearchParams = {
      user_id: record.user_id,
      channel: record.channel,
      page: 1,
    };

    const recordList = await getRecordList(reqParams);
    setList(recordList.data as unknown as WkdVipMange.RecordListItem[]);
  };

  useEffect(() => {
    if (visible) {
      handleRequest();
    } else {
      setList([]);
    }
  }, [visible]);

  return (
    <Modal
      destroyOnClose
      title={`${record.username}-开通记录`}
      visible={visible}
      centered
      onCancel={cancel}
      footer={null}
      width={900}
    >
      <ProTable<WkdVipMange.RecordListItem>
        actionRef={actionRef}
        rowKey={({ user_id, channel: platform }) => `${platform}${user_id}`}
        options={false}
        pagination={false}
        toolBarRender={false}
        columns={recordColumns}
        scroll={{ x: 900 }}
        search={false}
        dataSource={list}
      />
    </Modal>
  );
};

export default OpenModal;
